<template>
  <el-card>
    <Eform
      :model="form"
      :elem="fromData"
      :submit="true"
      :reset="true"
      :button="false"
      okIcon="Search"
      btnSize="small"
      submitText="搜索"
      @onSuccess="onSuccess"
      @onReset="clcikReset"
    >
    <template #formBottom>
      <span style="margin-left:10px;">
        <el-tooltip
            class="box-item"
            effect="dark"
            content="系统监测到项目计划实施异常会在每天9点推送给所选用户"
            placement="top-start"
          >
          <el-icon :size="21"><QuestionFilled /></el-icon>
      </el-tooltip>
      </span>
    </template>
  </Eform>
    <itable :table="tconfig.tableConfig" :tableData="tconfig.tableData" :page-bean="tconfig.pageBean" @pageChange="pageChange" @handleDel="handleDel" @handleAmend="handleAmend">
      <template #searchBox>
        <el-button size="small" type="primary">新建用户</el-button>
        <el-button size="small" type="danger">批量删除</el-button>
      </template>
    </itable>

    <el-dialog
    title="编辑用户"
    v-model="dialogVisible"
    width="28%">
    <el-form
      label-width="110px"
      :model="formLabelAlign"
      style="max-width: 460px"
      >
      <p class="formTitle">用户信息</p>
      <el-form-item label="用户名">
        <el-input v-model="formLabelAlign.name" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formLabelAlign.region" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formLabelAlign.type" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formLabelAlign.type" />
      </el-form-item>
      <el-form-item label="项目">
        <el-input v-model="formLabelAlign.type" />
      </el-form-item>
      <el-form-item label="是否绑定公众号">
        <span>未绑定</span>
      </el-form-item>
      <p class="formTitle">用户信息</p>
      <el-form-item label="角色类型">
        <el-input v-model="formLabelAlign.type" />
      </el-form-item>
      <p class="formTitle">权限信息</p>
      <el-form-item label="菜单权限">
        <el-input v-model="formLabelAlign.type" />
      </el-form-item>
      <el-form-item label="小程序权限">
        <el-input v-model="formLabelAlign.type" />
      </el-form-item>
      <el-form-item label="预警类型">
        <el-input v-model="formLabelAlign.type" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import itable from '@/components/table/table.vue'
import { PageBean } from "@/utils/page-bean";
import Eform from '@/components/eform/index.vue';

let fromData = reactive([
    {
      label: "姓名",
      prop: "username",
      clearable: true,
    },
    {
      label: "手机号",
      prop: "phone",
      clearable: true,
    },
    {
      element:'select',
      label: "类型",
      prop: "logType",
      option:[
        {label:'全部',value:'1'}
      ],
      clearable: true,
    }
])
let form = reactive({
  username:'',
  phone:'',
  logType:'1',
})
const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})
const tconfig = reactive({
  tableConfig: {} as {loading:boolean,[propName:string]:any},
  tableData: [{currenttime:'1',costtime:'2',onreason:'3',watermeter:'true'}] as any[],
  pageBean: new PageBean(10, 1, 0),
})
let dialogVisible = ref(false)
let itemInfo = ref()
/**
 * 表单
*/
// 重置
const clcikReset = () => {
  console.log('77')
}
// 提交
const onSuccess = (form) => {
  console.log(form)
}

/**
 * 表格
*/
// 编辑
const handleAmend = (a, b, id) => {
  itemInfo.value = b
  dialogVisible.value = true
}
// 删除
const handleDel = (a, b, id) => {

}
const pageChange = () => {

}

// 初始化表格
const initTable = () => {
  tconfig.tableConfig = {
    loading: false,
    hasSelect: false,
    hasIndex: true,
    hasOperation: true,
    hasSearch: true,
    hasPage: false,
    tr: [
      {
        label: "姓名",
        prop: "currenttime",
      },
      {
        label: "类型",
        prop: "costtime",
      },
      {
        label: "项目",
        prop: "onreason",
      },
      {
        label: "后台菜单权限",
        prop: "onreason",
      },
      {
        label: "小程序权限",
        prop: "onreason",
      },
      {
        label: "预警类型",
        prop: "onreason",
      },
      {
        label: "公众号绑定情况",
        prop: "onreason",
      },
      {
        label: "创建时间",
        prop: "onreason",
      },
    ],
    operation:{
      label:'操作',
      data:[
        {id:1, label:'编辑', icon:'el-icon-edit', size:'small', type:'text',classname:'compile',Fun:'handleAmend'},
        {id:2, label:'删除', icon:'el-icon-delete', size:'small', type:'text',classname:'delete',Fun:'handleDel'}
      ]
    }
  }
}
initTable()
</script>

<style lang='scss' scoped>
.formTitle{
  font-size: 15px;
  font-weight: bolder;
  color: #000
}
</style>
